<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root">
        <div>
            <div>
                <p>{{name}}</p>
                <p>{{sex}}</p>
            </div>
        </div>
        <p>{{old}}</p>
        <p>{{like}}</p>
    </div>

    <script>

    function compileTemplate(dom,data) {
            const regRule = /\{\{(.+?)\}\}/g

            // 获取所有节点包括子节点
            const childNodes = dom.childNodes

            for (let i = 0; i < childNodes.length; i++) {
                let type = childNodes[i].nodeType  // 3为文本，1为节点
                if (type === 3) {

                    // 获取节点的值
                    let txt = childNodes[i].nodeValue
                    // // 此时可以进行数据替换
                    txt = txt.replace(regRule, (a,b,c) => {
                        return data()[b]
                    })

                    childNodes[i].nodeValue = txt 

                } else if (type === 1) {
                    compileTemplate(childNodes[i], data)
                }
            }
    
        } 

    // 创建Gue方法
    function Gue(options) {
        // 规定_开头代表私有数据，可查询可替换
        this._data = options.data
        this._el = options.el 

        // 准备工作，获取节点
        this.$el = document.querySelector(this._el)

        // 开始渲染工作
        this.render()
    }

    // 在原型链上添加对应的渲染方法
    Gue.prototype.render = function () {
        this.compile()
    }

    // 在原型链上添加对应的渲染方法
    Gue.prototype.compile = function () {

        // 复制当前接地啊
        let copyNode = this.$el.cloneNode(this.$el)
        compileTemplate(copyNode, this._data )

        // 更新当前数据
        this.updated(copyNode)
    }

    Gue.prototype.updated = function (Node) {
        document.querySelector("#root").parentNode.replaceChild(Node, root)
    }


    // 函数也是对象
    let app = new Gue({
        el: "#root",
        data() {
                return {
                name: "张三",
                sex: "男",
                old: 18,
                like: "run"
            }
        }
    }) 
    </script>

</body>
</html>